<template>
  <div>
    <px-dialog v-model="innerVisible" draggable clickHideContent width="1372" :before-close="close" title="调整寿命" append-to-body align-center>
      <px-form ref="detailruleFormRef" :model="queryParams" :inline="true" label-width="90px">
        <px-row>
          <px-col :span="24">
            <px-form-item style="width: 400px !important" label="调整类型">
              <px-radio-group v-model="queryParams.type" class="ml-4">
                <px-radio label="ADD" size="large">延长</px-radio>
                <px-radio label="SUB" size="large">减短</px-radio>
              </px-radio-group>
            </px-form-item>
          </px-col>
          <px-col :span="8">
            <px-form-item style="width: 400px !important" label="调整周期">
              <px-input-number v-model="queryParams.lifecycle" controls-position="right" style="width: 100%" placeholder="请输入天数" />
              <p style="color: rgb(235 203 14)">说明：数据需填写调整后总寿命</p></px-form-item
            ></px-col
          >
          <px-col :span="8">
            <px-form-item style="width: 400px !important" label="适用时间">
              <px-date-picker
                v-model="queryParams.time"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="请选择"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss" /></px-form-item
          ></px-col>
          <px-col :span="8">
            <px-form-item style="width: 400px !important" label="填写人">
              <px-select v-model="queryParams.updater" placeholder="请选择填写人" style="width: 100%" clearable>
                <px-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.label" />
              </px-select> </px-form-item
          ></px-col>
          <px-col :span="24">
            <px-form-item label="备注" style="width: 100% !important" prop="remark">
              <px-input v-model="queryParams.memo" type="textarea" placeholder="请输入备注" maxlength="1000" :autosize="{ minRows: 3, maxRows: 3 }" />
            </px-form-item>
          </px-col>
        </px-row>
      </px-form>
      <p style="font-size: 16px; color: black">调整记录</p>
      <px-table v-loading="loading" :data="rukuList" height="300" show-overflow-tooltip highlight-current-row border>
        <!-- <px-table-column type="selection" width="40" /> -->

        <px-table-column label="调整类型" width="160" prop="inboundNumber">
          <template #default="scope">
            <span>{{ scope.row.purpose == "ADD" ? "延长" : "减短" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="调整周期" prop="gasType">
          <template #default="scope">
            <span>{{ scope.row.lifecycle }}</span>
          </template>
        </px-table-column>
        <px-table-column label="适用时间" prop="value">
          <template #default="scope">
            <span>{{ scope.row.installStart }}-{{ scope.row.installEnd }}</span>
          </template>
        </px-table-column>
        <px-table-column label="填写人" prop="value">
          <template #default="scope">
            <span>{{ scope.row.updater }}</span>
          </template>
        </px-table-column>
        <px-table-column label="填写日期" prop="value">
          <template #default="scope">
            <span>{{ scope.row.updateTime }}</span>
          </template>
        </px-table-column>
        <px-table-column label="备注" prop="value">
          <template #default="scope">
            <span>{{ scope.row.memo }}</span>
          </template>
        </px-table-column>
        <template #empty>
          <px-empty :image-size="150" />
        </template>
      </px-table>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="close">取消</px-button>
          <px-button type="primary" @click="savemeasure()"> 确定 </px-button>
        </span>
      </template>
    </px-dialog>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref, toRefs, reactive, onMounted, watch } from "vue";
import { pageMeasureList } from "@/api/system/measure";
import { PxMessage, PxMessageBox } from "px-ui";
import { userlistPage } from "@/api/waterQualityDetection";
import { consumableadjustFilterLifetime, consumablelistLifetimeAdjustHistory } from "@/api/waterConsumable";
const emits = defineEmits(["close", "setmeasure"]);
const props = defineProps({ classcode: { type: String, default: "" }, row: { type: Object, required: true } });
const detailruleFormRef = ref();
const selectrow = ref({});
const total = ref(0);
const rukuList = ref([]);
const loading = ref(false);
const innerVisible = ref(true);
const userList = ref([]);

const queryParams = ref({ type: "", time: [], devId: "", lifecycle: null, installStart: "", installEnd: "", updater: "", memo: "" });
onMounted(() => {
  queryParams.value.updater = `${JSON.parse(localStorage.getItem("userInfo")).username}-${JSON.parse(localStorage.getItem("userInfo")).realName}`;
  getRukuList();
  userlistPage({ page: 1, pageSize: 9999, deptNameList: ["WATER"], status: 0 }).then((response: any) => {
    userList.value = response.data.map(item => ({ label: `${item.username}-${item.realName}`, value: item.userId }));
  });
});

function handleQuery2(type) {
  if (type == "search") {
    queryParams.value.pageNum = 1;
  }
  getRukuList();
  selectrow.value = null;
}
function getRukuList() {
  loading.value = true;
  consumablelistLifetimeAdjustHistory({ devId: props.row.ffuId }).then(res => {
    rukuList.value = res;
    loading.value = false;
  });
}
const handelRadio = row => {
  selectrow.value = row;
};
function resetQuery() {
  queryParams.value = { type: "", time: [], devId: "", lifecycle: null, installStart: "", installEnd: "", updater: "", memo: "" };
  getRukuList();
}
const close = () => {
  emits("close", false);
};
const savemeasure = () => {
  let parmas = {
    devId: props.row.ffuId,
    type: queryParams.value.type,
    lifecycle: queryParams.value.lifecycle,
    installStart: queryParams.value.time[0],
    installEnd: queryParams.value.time[1],
    updater: queryParams.value.updater,
    memo: queryParams.value.memo
  };
  console.log(props.row);
  consumableadjustFilterLifetime(parmas).then(res => {
    console.log(res);
    PxMessage({ message: "修改成功", type: "success" });
    emits("close", false);
  });
  // emits("setmeasure", selectrow.value);
};
</script>
